
<template>
	<view class="mask ">
		<view class="content1">
			<!-- 按钮组 -->
			<view class="buttons">
				<view class="cancel" @click="cancel">取消</view>
				<view class="comfirm" @click="comfirm">确定</view>
			</view>
			<!-- 没有数据的展示 -->
			<view v-if="formData1.length == 0" class="no-data">
				<view class="iconfont icon-wushuju3 nodata-icon"></view>
				<view class="nodata-title">没有可选项</view>
			</view>
			<!-- 有数据时的多选组 -->
			<scroll-view :scroll-y="true" class="check-box-group" v-if="formData1.length > 0">
				<checkbox-group @change="change">
					<view v-for="(item, index) in formData1" :key="item.id" :data-index="index">
						<!-- label的背景：若不显示勾选框(showBox==false,则勾选框的opacity:0)，则已选项加(item.checked==true)上背景处理 -->
						<label class="uni-list-cell uni-list-cell-pd " 
							   :style="{ backgroundColor: item.checked && !showBox ? '#bee8f4' : '' }">
							<view class="hideBox-box"><checkbox :value="item.id+''" 
								  :checked="item.checked" :style="{opacity: showBox ? 1 : 0 }" /></view>
							<view class="hideBox-title">{{ item.receivePointName }}</view>
						</label>
					</view>
				</checkbox-group>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	name:'uniMultipleSelector',
	props:{
		formData:{//渲染的数据
			type:Array,
			default:[]
		},
		showBox:{//是否显示勾选框
			type:Boolean,
			default:true
		}
	},
	data() {
		return {
			selectValue: [],//当前选择的选项的id
			oldSelectValue: [],//存放页面刚加载时的已选择的数据id
		};
	},
	mounted() {
		this.formData1.map((item, index) => {
			if (item.checked) {
				this.oldSelectValue.push(item.id+'')
				this.selectValue=this.oldSelectValue
			}
		});
		console.log('mounted',this.formData1)
		uni.setStorage({
			key: 'multiSelectLastData',
			data: this.oldSelectValue
		});
	},
	computed: {
		formData1() {
			let formData1 =this.formData;
			return formData1;
		}
	},
	methods: {
		//勾选或取消勾选触发事件，拿到已选数据的id
		change(e) {
			console.log('change', e.detail.value);
			this.selectValue = e.detail.value;
			this.changeDataChecked(this.selectValue)
		},
		//取消选择时，不应该保留此次已选或取消选择的数据，应还原为上一次的数据
		cancel() {
			// console.log('cancel', this.selectValue);
			let multiSelectLastData = uni.getStorage({
				key: 'multiSelectLastData',
				success:res=>{
					this.selectValue = res.data;
					this.changeDataChecked(res.data)
				}
			});
			this.$emit('cancel', false);
		},
		comfirm() {
			uni.setStorage({
				key: 'multiSelectLastData',
				data: this.selectValue
			});
			this.$emit('comfirm', this.selectValue);
		},
		changeDataChecked(data){
			this.formData1.map((item, index) => {
				//item.id是数字的时候，checkbox的value要报错，所以转换为字符串
				if (data.indexOf(item.id + '') > -1) {
					item.checked = true;
				} else {
					item.checked = false;
				}
				//改变视图数据
				this.$set(this.formData1, index, item);
			});
		}
		
	}
};
</script>

<style scoped lang="less">
	@import './iconfont/iconfont.css';
	.mask {
		position: fixed;
		width: 100%;
		height: 100%;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.1);
		z-index: 1000;
		transition: all 0.3s;
	}
	.content1 {
		background: #fff;
		height: 40%;
		position: absolute;
		overflow: hidden;
		left: 0;
		bottom: 0;
		width: 100%;
		transition: all 0.3s;
	}
	.buttons {
		display: flex;
		justify-content: space-between;
		color: red;
		/* margin-bottom:40rpx; */
		padding: 20rpx 40rpx;
		font-family: 'Microsoft YaHei';
		font-size: 36rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}
	.cancel {
		color: #888;
	}
	.comfirm {
		color: #007aff;
	}
	.check-box-group {
		height: 85%;
	}

	.uni-list-cell {
		display: flex;
		padding: 0 200rpx;
		margin: 10rpx auto;
		align-items: center;
	}
	.no-data {
		text-align: center;
	}
	.nodata-title {
		font-size: 30rpx;
	}
	.nodata-icon {
		font-size: 200rpx;
		color: #76d4f1;
	}
</style>
